<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>SelectionTest</title>
    <script type="text/javascript" src="../../../../../montage.js" data-package="../../../../"></script>
    <script type="text/montage-serialization">
        {
            "test": {
                "prototype": "spec/ui/repetition/selection-test/selection-test",
                "values": {
                    "nameController": {"@": "nameController"},
                    "repetition": {"@": "repetition"}
                }
            },

            "nameController": {
                "prototype": "montage/core/range-controller",
                "values": {
                    "content": {"<-": "@test.content"}
                }
            },

            "repetition": {
                "prototype": "montage/ui/repetition.reel",
                "values": {
                    "element": {"#": "repetition"},
                    "isSelectionEnabled": true,
                    "contentController": {"<-": "@test.nameController"}
                }
            },

            "name": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "name"},
                    "value": {"<-": "@repetition:iteration.object"}
                }
            },

            "selectedName": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "selectedName"},
                    "value": {"<->": "@repetition.contentController.selection.0"}
                }
            },

            "clearSelectionButton": {
                "prototype": "montage/ui/component",
                "values": {
                    "hasTemplate": false,
                    "element": {"#": "clearSelectionButton"}
                }
            },

            "clearSelectionPressComposer": {
                "prototype": "montage/composer/press-composer",
                "values": {
                    "identifier": "clearSelectionButton",
                    "component": {"@": "clearSelectionButton"}
                },
                "listeners": [
                    {
                        "type": "press",
                        "listener": {"@": "test"}
                    }
                ]
            },

            "selectIndex0Button": {
                "prototype": "montage/ui/component",
                "values": {
                    "hasTemplate": false,
                    "element": {"#": "selectIndex0Button"}
                }
            },

            "selectIndex0PressComposer": {
                "prototype": "montage/composer/press-composer",
                "values": {
                    "identifier": "selectIndex0Button",
                    "component": {"@": "selectIndex0Button"}
                },
                "listeners": [
                    {
                        "type": "press",
                        "listener": {"@": "test"}
                    }
                ]
            },

            "selectIndex2Button": {
                "prototype": "montage/ui/component",
                "values": {
                    "hasTemplate": false,
                    "element": {"#": "selectIndex2Button"}
                }
            },

            "selectIndex2PressComposer": {
                "prototype": "montage/composer/press-composer",
                "values": {
                    "identifier": "selectIndex2Button",
                    "component": {"@": "selectIndex2Button"}
                },
                "listeners": [
                    {
                        "type": "press",
                        "listener": {"@": "test"}
                    }
                ]
            },

            "selectIndex4Button": {
                "prototype": "montage/ui/component",
                "values": {
                    "hasTemplate": false,
                    "element": {"#": "selectIndex4Button"}
                }
            },

            "selectIndex4PressComposer": {
                "prototype": "montage/composer/press-composer",
                "values": {
                    "identifier": "selectIndex4Button",
                    "component": {"@": "selectIndex4Button"}
                },
                "listeners": [
                    {
                        "type": "press",
                        "listener": {"@": "test"}
                    }
                ]
            },

            "addAndSelectButton": {
                "prototype": "montage/ui/component",
                "values": {
                    "hasTemplate": false,
                    "element": {"#": "addAndSelectButton"}
                }
            },

            "addAndSelectPressComposer": {
                "prototype": "montage/composer/press-composer",
                "values": {
                    "identifier": "addAndSelectButton",
                    "component": {"@": "addAndSelectButton"}
                },
                "listeners": [
                    {
                        "type": "press",
                        "listener": {"@": "test"}
                    }
                ]
            }
        }
    </script>

    <style type="text/css">
        li {
            list-style-type: none;
            background-color: #fbf4e3;
            margin: 0.2em;
            padding: 0.2em
        }

        li.selected {
            font-weight: bold;
            background-color: #eee8d7;
        }
    </style>

</head>
<body>
    <h1>Repetition Selection Test</h1>

    <ul data-montage-id="repetition">
        <li data-montage-id="name"></li>
    </ul>

    <p>Changing the selection through the user interface above should be reflected in the controller and reflected here:</p>
    SelectedName: <span data-montage-id="selectedName"></span>

    <p>Changing the selection in the controller directly should be reflected in all of the UI above</p>
    <button data-montage-id="clearSelectionButton">Clear Selection</button>
    <button data-montage-id="selectIndex0Button">Select Index 0</button>
    <button data-montage-id="selectIndex2Button">Select Index 2</button>
    <button data-montage-id="selectIndex4Button">Select Index 4</button>
    <button data-montage-id="addAndSelectButton">Add and Select</button>
</body>
</html>

